<%@ page import="java.util.List" %>
<%@ page import="com.luna.beans.User" %>
<%@ page import="com.luna.service.UserService" %>
<%@ page import="com.luna.serviceImpl.UserServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <title>Main Page</title>
  <link rel="stylesheet" href="static/dist/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="static/css/base.css"/>
  <script type="text/javascript" src="static/js/jquery-3.7.0.min.js"></script>
  <script type="text/javascript" src="static/dist/js/bootstrap.js"></script>
  <style>
    .row-tr td {
        width: 25%;
    }
  </style>
  <script>
      const base_href = window.location.href.slice(0, window.location.href.lastIndexOf('/'))
      function switchRegister() {
          $('.btn-restricted').click(function () {
              let state = $(this).text() === '封禁中' ? -1 : 0
              let uid = $(this).attr("uid")
              console.log(`/SwitchRestricted?uid=${"${uid}"}&state=${"${state}"}`)
              $.ajax({
                  url: base_href + `/SwitchRestricted?uid=${"${uid}"}&state=${"${state}"}`,
                  type: 'GET',
                  // success: function (data) {
                  //     console.log(data)
                  //     if (data.res) {
                  //         if (this.attr("class") === "btn btn-success btn-restricted") {
                  //             this.attr("class", "btn btn-danger btn-restricted")
                  //             this.text("封禁中")
                  //         } else {
                  //             this.attr("class", "btn btn-success btn-restricted")
                  //             this.text("正常")
                  //         }
                  //     } else {
                  //         alert('数据更新失败，后台出错')
                  //     }
                  // }
              })
              location.reload()
          })
      }
  </script>
  <script>
    window.onload = () => {
        switchRegister()
    }
    const toHome = () => {
      window.location.href = base_href + '/admin-index.jsp'
    }
    const toBook = () => {
        window.location.href = base_href + '/admin-books.jsp'
    }
    const logout = () => {
      window.location.href = base_href + '/LogoutServlet'
    }
  </script>
</head>
<body>

<%
  UserService userService = new UserServiceImpl();
  List<User> userList = userService.userList();
  request.setAttribute("userList", userList);
%>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" onclick="toHome()" style="cursor: pointer;">图书笔记管理系统</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
      <ul class="nav navbar-nav">
        <li class="active"><a onclick="toHome()" style="cursor: pointer;">用户管理</a></li>
        <li><a onclick="toBook()">图书管理</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a>欢迎您，管理员 ${sessionScope.user.getNickname()}！</a></li>
        <li><a style="cursor: pointer" onclick="logout()">退出登录</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container">
  <div style="margin-top: 80px;">
    <div class="panel panel-primary">
      <!-- Default panel contents -->
      <div class="panel-heading">用户一览</div>
      <!-- Table -->
      <table class="table">
        <thead>
        <tr>
          <th>#</th>
          <th>用户名</th>
          <th>昵称</th>
          <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${userList}" var="item">
          <tr class="row-tr">
          <th scope="row">${item.id}</th>
          <td>${item.name}</td>
          <td>${item.nickname}</td>
          <td>
            <c:choose>
              <c:when test="${item.state == 0}">
                <button class="btn btn-success btn-restricted" uid="${item.id}" >正常</button>
              </c:when>
              <c:otherwise>
                <button class="btn btn-danger btn-restricted" uid="${item.id}" >封禁中</button>
              </c:otherwise>
            </c:choose>
          </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
    </div>
  </div>
</div>
</body>
</html>
